<template>
    <div class="all">
        <div class="titleStyle">
            <div class="itemStyle">
                <div>
                    商品项信息
                </div>
                <div>
                    <el-button type="primary" size="mini" class="buttonStyle" @click="addButton">新增</el-button>
                </div>
            </div>
        </div>
        <div class="bodyStyle">
            <div>
                <el-table :data="tableData" style="width: 100%;" stripe max-height="300px">
                    <el-table-column label="商品项序号" min-width="190px">
                        <template slot-scope="scope">{{ scope.row.serialNumber }}</template>
                    </el-table-column>
                    <el-table-column label="商品项货物件数" min-width="190px">
                        <template slot-scope="scope">{{ scope.row.packagesNumber }}</template>
                    </el-table-column>
                    <el-table-column label="包装种类代码" min-width="190px">
                        <template slot-scope="scope">{{ scope.row.packageTypeCode }}</template>
                    </el-table-column>
                    <el-table-column label="危险品编号" min-width="190px">
                        <template slot-scope="scope">{{ scope.row.dangerousNumber }}</template>
                    </el-table-column>
                    <el-table-column label="海关税则编号" min-width="190px">
                        <template slot-scope="scope">{{ scope.row.customsTariffNumber }}</template>
                    </el-table-column>
                    <el-table-column label="商品项货物毛重" min-width="190px">
                        <template slot-scope="scope">{{ scope.row.weightOfGoods }}</template>
                    </el-table-column>
                    <el-table-column label="商品项简要描述" min-width="190px">
                        <template slot-scope="scope">{{ scope.row.itemDescription }}</template>
                    </el-table-column>
                    <el-table-column label="操作" fixed="right" width="100px">
                        <template slot-scope="scope">
                            <div>
                                <el-button @click.native.prevent="editButton(scope.$index, scope.row)" type="text"
                                    style="color: #0F47B8;" size="small">
                                    编辑
                                </el-button>
                                <el-button @click.native.prevent="deleteRow(scope.$index, scope.row)" type="text"
                                    style="color: #FF3838;" size="small">
                                    删除
                                </el-button>

                            </div>

                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <el-dialog :visible.sync="addShow" center :show-close="false" width="60%" append-to-body>
            <div v-if="addShow">
                <productNew :title="titleShow" :currentRow="currentRow" :closePage="getData"></productNew>
            </div>
        </el-dialog>
        <div class="footerStyle" >
            <el-button type="primary" size="mini" class="buttonStyle" @click="onSubmit">保 存</el-button>
        </div>
    </div>
</template>
<script>
import productNew from "./productNew.vue";
export default {
    components: {productNew},
    props: {
        childrenData: {
            type: Array,
            default: []
        },
        closePage: {
            type: Function,
        },
    },
    data() {
        return {
            tableData: [],
            titleShow:"",
            currentRow:{},
            currentIndex:"",
            addShow:false
        }
    },
    mounted() { 
        this.tableData=[...this.childrenData]
    },
    methods: {
       
        addButton() {
            this.addShow = true
            this.titleShow = "新增"
            this.currentRow = {}
            this.currentIndex = ""
        },
        editButton(index, row) {
            this.addShow = true
            this.titleShow = "编辑"
            this.currentRow = row
            this.currentIndex = index
        },
        deleteRow(index, item) {
            this.tableData.splice(index, 1)
        },
        getData(type, item) {
            this.addShow = false
            if (type == "新增") {
                this.tableData.push(item)
            } else if (type == "编辑") {
                this.$set(this.tableData, this.currentIndex, item)
            } else {
                return false
            }
        },
        onSubmit(){
            let type = "0"
            let item = [...this.tableData]
            this.closePage(type,item)
        }
    },
}
</script>
<style lang='scss' scoped>
.all {
    .titleStyle {
        // position: relative;
        // top: -38px;
        font-size: 16px;
        color: #333333;

        .itemStyle {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .buttonStyle {
                background-color: #0F47B8;
            }
        }
    }

    .bodyStyle {
        margin-top: 0;

    }
    .footerStyle {
        display: flex;
        justify-content: space-around;
        margin-bottom: -3%;
        margin-top: 2%;
        .buttonStyle {
            background-color: #0F47B8;
        }
    }

}
</style>